<template>
  <view class="my_content">
    <!-- <image
      class="bgImg"
      src="../../static/my/bg.png"
      mode="widthFix"
      lazy-load="false"
      binderror=""
      bindload="">
    </image> -->
    <view class="bgColor"></view>
    <view class="userInfo">
      <image
        class="avatar"
        :src="avatarSrc"
        alt="" />
      <view class="name">
        <view class="name1">{{
          userInfo.name ? userInfo.name : namePhone
        }}</view>
        <view class="phone">{{ phone }}</view>
      </view>
      <image
        class="tubiao"
        src="../../static/my/huiyuan.png"></image>
    </view>
    <view class="tokenInfo">
      <view
        class="one"
        @click.stop="toTokenPages('notUse')">
        <view class="num">{{ userInfo.count }}</view>
        <view class="txt">{{ $tokenName }}兑换券</view>
      </view>
      <view
        class="two"
        @click.stop="toEveryPages('/pages/MyToken/MyToken')">
        <view class="num">{{ userInfo.tokenNum }}</view>
        <view class="txt">去提现</view>
      </view>
      <view
        class="three"
        @click.stop="toEveryPages('/pages/tokenRecord/index')">
        <view class="num">{{ userInfo.exchangeNum }}</view>
        <view class="txt">已兑{{ $tokenName }}</view>
      </view>
    </view>
    <view class="consumeCard">
      <view
        class="smallCard"
        @click.stop="toEveryPages('/pages/tokenRecord/index')"
        ><image
          class="iconImg"
          src="../../static/my/5.png"></image>
        <text class="txt">{{ $tokenName }}兑换记录</text
        ><navigator>
          <uni-icons
            type="forward"
            size="20"></uni-icons></navigator
      ></view>
      <view
        class="smallCard"
        @click.stop="toEveryPages('/pages/consume/index')"
        ><image
          class="iconImg"
          src="../../static/my/3.png"></image
        ><text class="txt">消费记录</text
        ><navigator>
          <uni-icons
            type="forward"
            size="20"></uni-icons> </navigator
      ></view>
      <!-- @click.stop="toEveryPages('6')" -->
      <view
        class="smallCard"
        @click.stop="toEveryPages('/pages/bankCard/index')"
        ><image
          class="iconImg"
          src="../../static/my/4.png"></image
        ><text class="txt">银行卡设置</text>
        <navigator>
          <uni-icons
            type="forward"
            size="20"></uni-icons> </navigator
      ></view>
    </view>
    <view class="consumeCard">
      <view
        class="smallCard"
        @click.stop="showToast"
        ><image
          class="iconImg"
          src="../../static/my/1.png"></image
        ><text class="txt">联系客服</text>
        <uni-icons
          type="forward"
          size="20"></uni-icons
      ></view>
    </view>
  </view>
</template>

<script>
  import { getMemberInfo } from '@/apis/user'
  import { rsaDecrypt } from '@/utils/rsa'
  import {
    reqUploadUserAvatar,
    reqUpdateUserInfo,
    reqDicToShowWithdrawal,
    reqGetRealnameStatus
  } from '@/apis/my'
  export default {
    name: 'My',
    data() {
      return {
        userInfo: {},
        phone: '',
        namePhone: '',
        avatarSrc: '../../static/my/avatar.png',
        // 0 为实名  1 已实名未绑卡  2均完成
        realType: 0
      }
    },
    onShow() {
      this.getMemberInfo()
    },
    methods: {
      async getMemberInfo() {
        const res = await getMemberInfo({ id: this.$store.getters.userInfo.id })
        if (res.code === 200) {
          const data = res.data
          this.userInfo = data
          this.avatarSrc = data.headImg
            ? data.headImg
            : '../../static/my/avatar.png'
          console.log('this.userInfo', this.userInfo)
          //校验手机号是否正确
          this.phone = this.userInfo.phone.replace(
            /^(\d{3})\d{4}(\d{4})$/,
            '$1****$2'
          )
          this.namePhone = this.userInfo.phone.replace(
            /^(\d{3})\d{4}(\d{4})$/,
            '$2'
          )
          // 实名认证状态
          this.getRealnameStatus()
        } else {
          uni.utils.toast(res.message)
        }
      },
      async getRealnameStatus() {
        let resd = await reqGetRealnameStatus({
          id: this.userInfo.id
        })
        this.realType = 2
        console.log(resd)
        if (resd.code !== 200) {
          if (resd.code === 51003) {
            this.realType = 0
          } else if (resd.code === 51004) {
            this.realType = 1
          }
        }
        console.log(this.realType, 'type')
      },
      showToast() {
        uni.utils.toast('功能正在研发中...')
      },
      toEveryPages(url) {
        if (url == '/pages/bankCard/index' && this.realType == 2) {
          // console.log(1111111)
          url = '/pages/bankList/bankList'
        } else if (url == '/pages/bankCard/index' && this.realType == 0) {
          // console.log(22222)
          uni.showModal({
            content: '请先完成实名认证',
            confirmText: '确定',
            cancelColor: '#999',
            // showCancel:false,
            confirmColor: '#2f64ff',
            mask: true,
            success: (result) => {
              if (result.confirm) {
                console.log(333333)
                uni.navigateTo({
                  url: '/pages/RealName/RealName'
                })
              } else {
                console.log('取消')
              }
            },
            fail: () => {
              console.log('失败')
            }
          })
          return
        }
        uni.navigateTo({
          url: url + '?memberId=' + this.$store.getters.userInfo.id
        })
      },
      toTokenPages(type) {
        uni.navigateTo({
          url:
            '/pages/tokenPages/tokenPages?' +
            'memberId=' +
            this.$store.getters.userInfo.id +
            '&type=' +
            type
        })
        // console.log(type)
      }
    }
  }
</script>

<style scoped lang="scss">
  .my_content {
    padding-top: 40rpx;
    .bgImg {
      width: 100vw;
      position: fixed;
      top: 0;
      z-index: -1;
      height: 40vh;
    }
    .bgColor {
      width: 100vw;
      position: fixed;

      top: 40vh;
      z-index: -1;
      height: 60vh;
    }
    min-height: 100vh;

    .userInfo {
      z-index: 999;
      display: flex;
      padding: 40rpx;
      .avatar {
        height: 100rpx;
        width: 100rpx;
        border-radius: 50rpx;
      }
      .name {
        margin-left: 20rpx;

        .name1 {
          font-size: 40rpx;
          font-weight: 700;

          margin-bottom: 18rpx;
        }
        .phone {
          font-size: 20rpx;
        }
      }
      .tubiao {
        width: 138rpx;
        height: 48rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        margin-left: 20rpx;
        padding-top: 6rpx;
      }
    }
    .tokenInfo {
      display: flex;
      height: 70px;
      padding-top: 20rpx;
      margin-bottom: 40rpx;
      justify-content: space-evenly;
      .one {
        margin: 0 auto;
        width: 28%;
      }
      .two {
        width: 28%;
        margin: 0 auto;
      }
      .three {
        width: 28%;
        margin: 0 auto;
      }
      .num {
        font-size: 40rpx;
        font-weight: 700;
        color: #1a1a1a;
        text-align: center;
        margin-bottom: 10px;
      }
      .txt {
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #666666;
      }
    }
    .consumeCard {
      margin: 0 20rpx;
      background-color: #fff;
      height: 276rpx;
      border-radius: 16rpx;
      padding: 20rpx;

      margin-bottom: 30rpx;
      .iconImg {
        width: 52rpx;
        height: 52rpx;
        line-height: 52rpx;
      }
      .smallCard {
        display: flex;
        justify-content: space-between;
        padding-left: 5px;
        height: 52rpx;
        line-height: 52rpx;
        margin-bottom: 20rpx;
        .txt {
          flex: 1;
          margin-left: 20px;
        }
      }
      .smallCard:nth-child(1) {
        margin-bottom: 50rpx;
      }
      .smallCard:nth-child(2) {
        margin-bottom: 50rpx;
      }
    }
    .consumeCard2 {
      background-color: #fff;
      height: 92rpx;
      border-radius: 16rpx;
      padding: 20rpx;
      margin: 0 20rpx;

      .iconImg {
        width: 52rpx;
        height: 52rpx;
      }
      .smallCard {
        display: flex;
        justify-content: space-between;
        padding-left: 5px;
        height: 52rpx;
        line-height: 52rpx;

        margin-bottom: 20rpx;
        .txt {
          flex: 1;
          margin-left: 20px;
        }
      }
    }
  }
</style>
